<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎使用后台管理系统</div>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon user-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">用户数量</div>
              <div class="card-value">1,234</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon order-icon">
              <el-icon><ShoppingCart /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">订单数量</div>
              <div class="card-value">5,678</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon revenue-icon">
              <el-icon><Money /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">总收入</div>
              <div class="card-value">¥123,456</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon visit-icon">
              <el-icon><View /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">访问量</div>
              <div class="card-value">89,012</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-text {
  font-size: 30px;
  line-height: 46px;
  text-align: center;
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: #fff;
}

.user-icon {
  background: #409EFF;
}

.order-icon {
  background: #67C23A;
}

.revenue-icon {
  background: #E6A23C;
}

.visit-icon {
  background: #F56C6C;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}
</style>